<#import "/_admin/lib/sidbar_templet.html" as sidbarTemplet>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Exam</title>

    <!-- Bootstrap -->
    <link href="/static/assets/yeti/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/style.css"/>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<style>
    .backs {
        background-image: url("/static/images/admin_bg1.jpg");
        /*background-color: #3b4a5c;*/
        background-size: 100%;
    }

    .box {
        box-shadow: 0 0 10px #000 !important;
    }

    .bzi {
        width: 80%;
        height: 80%;
        padding-left: 40%;
        padding-top: 6%;

    }


</style>
<body class="backs">
<!--  <img class="bzi"  src="/static/img/biglogo.png">-->
<div class="bzi">
    <h1 style="color:white">欢迎进入考试系统管理界面</h1>
    <div  id="container" style="min-width:400px;height:400px;margin:0 auto"></div>
</div>
<div style="width: 60%;margin-left: 30%">
    <table class="layui-hide" id="test" lay-filter="test" style="margin:0 auto" ></table>
</div>

<@sidbarTemplet.header />

<div class="container-fluid ">
    <div class="col-xs-2 sidebar box">
        <ul class="nav nav-sidebar">
            <@sidbarTemplet.sidbar "index.html" />
        </ul>
    </div>
    <div class="col-xs-10 col-xs-offset-2 content"><!--content-->
    </div><!--content-->
</div>

<!--表格-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
<!--        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
<!--        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
<!--        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--表格-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script>
    $(function () {

    });

    function add() {
        $('#myModal').modal({backdrop: 'static', keyboard: false});
    }
</script>

<script>
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: '学生分值比例'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: '10-60分',
                y: 30,
                sliced: true,
                selected: true
            }, {
                name: '0分',
                y: 5
            }, {
                name: '60-90分',
                y: 60
            }, {
                name: '90-100分',
                y: 5
            }]
        }]
    });
</script>


<script>
    // layui.use('table', function () {
    //     var table = layui.table;
    //     table.render({
    //         elem: '#test'
    //         , url: '/admin/AllScore/'
    //         , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    //         , cols: [[
    //             {field: 'userName', title: '姓名'}
    //             , {field: 'fraction', title: '成绩'}
    //             , {field: 'testPaperName', title: '科目'}
    //         ]]
    //     });
    // });
</script>

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            , url: '/admin/AllScore/'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '成绩表'
            , cols: [[
                {field: 'userName', title: '姓名'}
                , {field: 'fraction', title: '成绩'}
                , {field: 'testPaperName', title: '科目'}
            ]]
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
</body>
</html>